<template>
    <div class="wl-collapse-item" :class="{
        'is-disabled': disabled
    }" @click="handleItemClick(name)">
        <!-- 标题部分 -->
        <div class="wl-collapse-item__header" :class="{
            'is-disabled': disabled,
            'is-active': isActive
        }" :id="`item-header-${name}`">
            <slot name="title">{{ title }}</slot>
            <div class="header-angle">
                <wl-icon icon="angle-right"></wl-icon>
            </div>
        </div>
        <!-- 内容部分 -->
        <transition name="slide" v-on="transitionEvents">
            <div class="wl-collapse-item_wraper" v-show="isActive">
                <div class="wl-collapse-item_content" :id="`item-content-${content}`">
                    <slot />
                </div>
            </div>
        </transition>


    </div>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import { collapseItemProps, collapseContenxKey } from './props';
import type { CollapseContext } from './props'; // 假设定义了上下文类型

const collapseContext = inject<CollapseContext>(collapseContenxKey)
const { activeNames, handleItemClick } = collapseContext as CollapseContext
defineOptions({
    name: 'wl-collapse-item'
})
const props = defineProps(collapseItemProps)
const isActive = computed(() => activeNames && activeNames.value.includes(props.name))
// 在这个对象里面，会指定过渡开始和结束时的不同样式
const transitionEvents = {
    beforeEnter(el) {
        el.style.height = '0px'
        el.style.overflow = 'hidden'
    },
    enter(el) {
        el.style.height = el.scrollHeight + 'px'
    },
    afterEnter(el) {
        el.style.height = ''
        el.style.overflow = ''
    },
    beforeLeave(el) {
        el.style.height = el.scrollHeight + 'px'
        el.style.overflow = 'hidden'
    },
    leave(el) {
        el.style.height = '0px'
    },
    afterLeave(el) {
        el.style.height = ''
        el.style.overflow = ''
    }
}
</script>

<style scoped lang="scss"></style>